<template>
    <div class="table-box card">
        <div class="header-container">
            <h1 class="main-title">分类管理</h1>
            <p class="sub-title">维护产品的所有分类体系，将同步至小程序端</p>
        </div>

        <el-tabs v-model="activeTab" class="classification-tabs">
            <!-- 循环生成所有标签页 -->
            <el-tab-pane v-for="tab in classifyTabs" :key="tab.name" :label="tab.label" :name="tab.name">
                <div class="category-container">
                    <!-- 添加新分类区域（复用产品系列的结构） -->
                    <div class="add-section">
                        <el-input v-model="addForm" placeholder="输入新分类名称" style="width: 240px"
                            @keyup.enter="handleAdd(tab.name)" />
                        <el-button type="primary" size="small" @click="handleAdd(tab.name)"
                            :disabled="!addForm.trim()">添加</el-button>
                    </div>

                    <!-- 分类列表（复用产品系列的结构） -->
                    <div class="category-list">
                        <div v-for="(item, index) in categoryLists[tab.name]" :key="index" class="category-item">
                            <template v-if="item.isEditing">
                                <el-input v-model="item.name" size="small" style="width: 200px"
                                    @keyup.enter="handleSaveEdit(tab.name, index)" />
                                <el-button type="success" size="small" @click="handleSaveEdit(tab.name, index)"
                                    class="operate-btn">保存</el-button>
                            </template>

                            <template v-else>
                                <span class="category-name">{{ item.name }}</span>
                                <el-button type="text" size="small" icon="EditPen" @click="handleEdit(tab.name, index)"
                                    class="operate-btn">修改</el-button>
                                <el-button type="text" size="small" icon="Delete" @click="handleDelete(tab.name, index)"
                                    class="operate-btn">删除</el-button>
                            </template>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';  // 新增：导入消息提示
import {
    listClassify,
    getClassify,
    delClassify,
    addClassify,  // 确保已导入该接口
    updateClassify,
    listWithFather
} from "@/api/zc/classification";
import { EditPen, Delete } from "@element-plus/icons-vue";

// 初始化激活的标签页
const activeTab = ref('productSeries');

// 分类数据存储（每个标签对应一个列表）
const categoryLists = ref({
    productSeries: [],    // 产品系列
    productCategory: [],  // 产品分类
    productMaterial: [],  // 产品材质
    productColor: [],     // 产品颜色
    productStyle: []      // 产品分格
});

// 添加分类的临时输入
const addForm = ref('');

// 处理添加分类（修改）
const handleAdd = async (tabName: string) => {  // 改为异步函数
    const value = addForm.value.trim();
    if (!value) return;

    const currentTab = getCurrentTab();  // 获取当前标签配置
    if (!currentTab) return;

    try {
        // 调用添加接口（新增）
        await addClassify({
            fatherName: currentTab.label,  // 当前标签中文名称
            childName: value  // 输入的分类名称
        });

        // 接口调用成功后更新本地数据（保持同步）
        categoryLists.value[tabName].push({
            name: value,
            isEditing: false
        });
        addForm.value = '';  // 清空输入框
        loadCategoryData();
        ElMessage.success('添加分类成功');  // 成功提示
    } catch (error) {
        ElMessage.error('添加分类失败，请重试');  // 失败提示
    }
};

// 处理进入编辑状态
const handleEdit = (tabName: string, index: number) => {
    categoryLists.value[tabName][index].isEditing = true;
};

// 处理保存编辑
const handleSaveEdit = async (tabName: string, index: number) => {  // 改为异步函数
    const currentItem = categoryLists.value[tabName][index];
    const newName = currentItem.name.trim();
    if (!newName) return;

    const currentTab = getCurrentTab();
    if (!currentTab) return;

    try {
        // 调用更新接口（新增）
        await updateClassify({
            fatherName: currentTab.label,  // 当前标签中文名称
            childName: newName,  // 修改后的名称
            id: currentItem.id  // 分类id
        });

        // 接口调用成功后更新本地数据
        currentItem.isEditing = false;
        ElMessage.success('修改分类成功');  // 成功提示
    } catch (error) {
        ElMessage.error('修改分类失败，请重试');  // 失败提示
    }
};

// 处理删除分类（修改）
const handleDelete = async (tabName: string, index: number) => {  // 改为异步函数
    const currentItem = categoryLists.value[tabName][index];
    if (!currentItem.id) return;  // 确保存在id

    try {
        console.log(currentItem.id);
        // 调用删除接口（新增）
        await delClassify( currentItem.id );  // 传入分类id

        // 接口调用成功后删除本地数据
        categoryLists.value[tabName].splice(index, 1);
        ElMessage.success('删除分类成功');  // 成功提示
    } catch (error) {
        ElMessage.error('删除分类失败，请重试');  // 失败提示
    }
};

// 定义分类标签配置（替代手动编写五个标签页）
const classifyTabs = ref([
    { label: "产品系列", name: "productSeries" },
    { label: "产品分类", name: "productCategory" },
    { label: "产品材质", name: "productMaterial" },
    { label: "产品颜色", name: "productColor" },
    { label: "产品风格", name: "productStyle" }
]);

// 获取当前激活标签的配置
const getCurrentTab = () => {
    return classifyTabs.value.find(tab => tab.name === activeTab.value);
};

// 加载分类数据（修改）
const loadCategoryData = async () => {
    const currentTab = getCurrentTab();
    if (!currentTab) return;

    try {
        const { data } = await listWithFather({ fatherName: currentTab.label,pageNum:1,pageSize:1000 });
        // 保留接口返回的id字段（假设接口返回字段为id和childName）
        categoryLists.value[currentTab.name] = data.map(item => ({
            id: item.id,  // 新增：保存id
            name: item.childName,
            isEditing: false
        }));
    } catch (error) {
        console.error('加载分类数据失败:', error);
    }
};

// 监听标签切换（新增）
watch(activeTab, () => {
    loadCategoryData();
});

// 组件挂载时加载初始数据（新增）
onMounted(() => {
    loadCategoryData();
});
</script>

<style lang="scss" scoped>
.header-container {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f0f2f5;

    .main-title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
    }

    .sub-title {
        font-size: 14px;
        color: #606266;
        margin: 0;
    }
}

.classification-tabs {
    padding: 24px;

    // 调整标签页样式
    .el-tabs__header {
        margin-bottom: 16px;
    }

    .el-tabs__nav-wrap::after {
        height: 1px;
        background: #f0f2f5;
    }

    .el-tabs__item {
        font-size: 14px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
    }

    .el-tabs__active-bar {
        height: 2px;
        background: #409eff;
    }
}

.category-container {
    padding: 24px;
}

.add-section {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;

    .el-input {
        border-radius: 4px;
    }

    .el-button {
        border-radius: 4px;
        padding: 6px 16px;
    }
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 16px; // 增大分类项间距
}

.category-item {
    background: #ffffff; // 纯白背景提升质感
    border: 1px solid #f0f2f5; // 添加浅边框
    border-radius: 8px; // 增大圆角
    padding: 16px 20px; // 调整内边距
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); // 添加轻微阴影
    transition: all 0.2s ease;

    &:hover {
        background: #f8f9fa;
        transform: translateY(-2px); // 悬停轻微上移
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
}

/* 非编辑状态样式优化 */
.category-name {
    font-size: 14px;
    color: #303133;
    font-weight: 500; // 文字加粗
}

.operate-btn {
    padding: 0 12px; // 增大按钮内边距
    transition: all 0.2s;

    // 修改图标颜色（Element Plus默认色）
    &:hover {
        color: #409eff;

        .el-icon {
            transform: scale(1.1); // 悬停图标放大
        }
    }
}

/* 编辑状态样式优化 */
.el-input {
    &.is-small {
        border-radius: 4px;

        .el-input__inner {
            padding: 0 12px;
            height: 32px;
            border-color: #e4e7ed; // 输入框边框颜色
        }
    }
}

.operate-btn.el-button--success {
    color: #67c23a; // 保存按钮绿色
    border-color: #e1f3d8; // 浅绿边框
    background: #f0f9eb; // 浅绿背景
    padding: 6px 12px;
    border-radius: 4px;

    &:hover {
        background: #e1f3d8;
        border-color: #d1edc4;
    }
}
</style>